<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" >

	<ui:composition template="/templates/login.xhtml" >
		<ui:define name="js">
			<h:outputScript library="js" name="jquery.maskedinput-1.2.2.min.js" target="body" />
			<script type="text/javascript">
				var RecaptchaOptions = {
					theme : 'white',
					lang : 'pt',
					};
			</script>
		</ui:define>
		<ui:define name="css">
			<link rel="stylesheet" type="text/css" href="style/folha.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/cadastro.css" media="screen" />
			<style type="text/css">
			body {
				margin-left: 0px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
			}
			</style>
		</ui:define>
		<ui:define name="content">
			<h:form id="content" onkeypress="if (event.keyCode == 13) { document.getElementById('content:cadastro').click(); return false; }">
			
				<div class="conteiner">
					<div class="topo">
				        <div class="logo" align="center">
				        	<a4j:commandLink action="#{telaInicialBean.inicio}" immediate="true" >
				        		<img src="images/logo.gif" width="198" height="96" />
				        	</a4j:commandLink>
				        </div>
				      	<div class="middle"></div>
				      	<div class="topo_home">
				      		<a4j:commandLink value="Página inicial" action="#{telaInicialBean.inicio}" immediate="true"/>
				      	</div>
					</div>
				  	<div class="faixa_azul"></div>
				  	<div class="meio_left"><img src="images/colmeia_lateral.gif" width="400" height="268" /></div>
				  	<div class="meio_right">
				  		<div class="barra_cinza_subtitulo">&nbsp;Crie sua conta</div>
				    	<div class="cadastro">
				   	  		<div class="texto1">Email:</div>
				         	<div class="field2">
				         		<h:inputText value="#{cadastroBean.cadastroInicial.email}" size="30" required="true" 
				         			requiredMessage="CAMPO EMAIL É OBRIGATÓRIO" validatorMessage="FORMATO DE EMAIL INVÁLIDO" >
				         			<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
				         		</h:inputText>
				         	</div>
				         	<div class="texto1">Confirma Email:</div>
				         	<div class="field2">
				         		<h:inputText value="#{cadastroBean.cadastroInicial.confirmaEmail}" size="30" required="true" 
				         			requiredMessage="CAMPO CONFIRMAÇÃO EMAIL É OBRIGATÓRIO" validatorMessage="FORMATO DE EMAIL INVÁLIDO" >
				         			<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
				         		</h:inputText>
				         	</div>
				      		<div class="texto1">Nome:</div>
							<div class="field2">
				           		<h:inputText value="#{cadastroBean.cadastroInicial.nome}" size="30" />
				         	</div>
				      		<div class="texto1">Nome de usuário:</div>
				         	<div class="field2">
				           		<h:inputText value="#{cadastroBean.cadastroInicial.nomeUsuario}" size="30" />
				         	</div>
				      		<div class="texto1">Senha:</div>
							<div class="field2">
								<h:inputSecret value="#{cadastroBean.cadastroInicial.senha}" size="30" />
							</div>
				      		<div class="texto1">Confirme a senha:</div>
				         	<div class="field2">
				           		<h:inputSecret value="#{cadastroBean.cadastroInicial.confirmacaoSenha}" size="30" />
				         	</div>
	
							<div class="texto1">Segurança:</div>
      						<div class="captcha">
      							<h:outputText value="#{cadastroBean.codigoHtmlRecaptcha}" escape="false" />
      						</div>
								
			      			<div class="termos" align="right">
				        		<label>
				        			<h:selectBooleanCheckbox value="#{cadastroBean.cadastroInicial.aceiteTermoseCondicoes}" />
				        		</label>Eu aceito os 
				        		<strong>
				        			<a4j:commandLink value="termos e condições" action="#{telaInicialBean.termosCondicoes}" immediate="true" />
				        		</strong>
				      		</div>
				      		<div class="botao_cancelar" id="linkbranco">
				      			<h:commandLink id="cadastro" value="Cadastrar" action="#{cadastroBean.cadastrar}" />
				      		</div>
				      		<div class="botao_cadastrar" id="linkbranco">
				      			<a4j:commandLink value="Cancelar" action="#{telaInicialBean.inicio}" immediate="true" />
				      		</div>
				      		
				    	</div>
				  	</div>
				  	<div class="over_rodape"></div>
				  	<div class="rodape">
						<div class="rodape_part1"><a href="#"><img src="images/rodape1.gif" width="246" height="57" /></a></div>
						<div class="rodape_separador"></div>
						<div class="rodape_part2"><img src="images/rodape2.gif" width="400" height="57" usemap="#Map" border="0" />
				      		<map name="Map" id="Map">
				        		<area shape="rect" coords="192,17,277,46" href="#" />
				        		<area shape="rect" coords="104,17,181,49" href="#" />
				        		<area shape="rect" coords="2,17,87,46" href="#" />
				        		<area shape="rect" coords="294,19,395,45" href="#" />
				     		</map>
						</div>
				    	<div class="rodape_separador"></div>
				    	<div class="rodape_part3">SAC/OUVIDORIA 0300-210-4001</div>
				  	</div>
				</div>
			
			</h:form>
		</ui:define>
	</ui:composition>

</html>